<template>
    <div>
        <button @click="sub">-</button>
        <span>{{ value }}</span>
        <button @click="add">+</button>
    </div>
</template>

<script>
export default {
    props:{
        value:Number  // 10 
    },
    methods:{
        sub(){
            // 不能直接修改父组件传过来的props值
            // this.value = this.value -1 
            // this.value--

            // 这里的自定义事件名，可以任意起 ，可以叫input / click
            this.$emit('input', this.value - 1)
        },
        add(){
            this.$emit('input', this.value + 1)
        }
    }
    // 如果要使用v-model 绑定组件 ==> 
    // 子组件中 1. props接收的属性名 一定要叫value
    //         2. this.$emit('自定义事件名')  要写成input 
}
</script>

<style scoped>
span{
  margin: 0 5px;
}
</style>